🎙 Frontend Mix 2025: как защитить, оживить и ускорить фронтенд

ЮMoney и Сбер собрали фронтенд-инженеров в Петербурге, чтобы обсудить практики, которые реально работают в продакшене.

Запись уже доступна, а мы кратко делимся, что было ⬇️

🟥 Рефакторинг за секунды: показали, как через jscodeshift и CLI-инструменты массово обновлять код без боли.

🟥 Анимации без лагов: секреты плавных интерфейсов: FLIP, requestAnimationFrame, CSS-трюки.

🟥 Безопасность в финтехе: как не дать сломать ваш фронт: защита от XSS, supply-chain атак, фишинга.

🟥 Тестирование UI: показали, как грамотно покрывать фронт без фанатизма.

🔗 Смотреть запись митапа

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово

🐰 Что такое область видимости в JavaScript

Область видимости (scope) — это правила, по которым переменные «видны» в разных частях кода.

Основные виды:

• Глобальная — переменная доступна везде.

• Функциональная — только внутри функции.

• Блочная (let, const) — только внутри фигурных скобок { }.

function test() {
let msg = "Hi!";
}
console.log(msg); // Ошибка: msg не существует вне функции

Почему так:

msg создана внутри функции и доступна только там. Вне — она как будто не существует.

💡 Зачем понимать scope:

• Избегаешь конфликтов между переменными.

• Пишешь чистый и предсказуемый код.

• Не ловишь ошибки из-за «невидимых» переменных.

🐸 Библиотека фронтендера

#междусобойчик

📣 Подборка статей для старта в карьере

🔘 Что с работой в IT в 2025 году: обзор от TheCode.Media, анализирующий текущее состояние рынка труда в IT, включая востребованные профессии, зарплаты и влияние нейросетей.

🔘 Фронтенд в 2025 году: тренды, которые изменят разработку

🔘 Как войти в IT в 2025 году и не потратить на это 10 лет: практическое руководство от Хабра, предлагающее советы начинающим специалистам по выбору ниши, обучению, созданию пет-проектов и поиску работы.

🐸 Библиотека фронтендера

#свежак

🐹 Топ-вакансий для фронтендеров за неделю

Frontend-разработчик (React JavaScript) — от 200 000 ₽, удаленно (Москва)

Разработчик интерфейсов (Видеопоиск) — 250 000 —‍ 380 000 ₽, офис/гибрид (Москва/Санкт-Петербург)

Middle Backend/Full Stack JavaScript Developer — удаленно (США/Канада)

Middle Frontend-разработчик (React, Next.js) — от 150 000 до 250 000 ₽, офис (Тамбов)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак

🎮 Код из книги: Управление состоянием с помощью Signals в Angular

Проблема: В современных Angular-приложениях управление состоянием часто становится сложным и трудоёмким, особенно когда используются различные подходы, такие как NgRx или манипуляции с обычными переменными. Это может привести к трудностям в отслеживании изменений состояния и взаимодействии между компонентами.

Решение: Использование Signals — нового инструмента для управления состоянием, который упрощает реактивное программирование в Angular и улучшает производительность. Signals обеспечивают прямое отслеживание изменений состояния, что делает код более читаемым и эффективным.

Пример кода для простого счётчика с использованием Signals:

import { signal } from '@angular/core';

export const counterSignal = signal(0);

export function incrementCounter() {
  counterSignal.update(count => count + 1);
}

export function decrementCounter() {
  counterSignal.update(count => count - 1);
}

Преимущества:

— Использование Signals упрощает код и делает его легче для понимания.
— Signals обеспечивают более эффективное отслеживание изменений, чем традиционные подходы.
— Signals можно интегрировать с другими подходами, такими как RxJS, для получения максимальной гибкости.

➡️ Еще больше полезных книг — в нашем канале @progbook

🐸 Библиотека фронтендера

#буст

🚀 Bun 1.1 — самая быстрая среда для JavaScript

Альтернатива Node.js получила масштабное обновление:

— Теперь с поддержкой Windows

— bun serve стабилен — встроенный HTTP-сервер без Express

— Пакеты ставятся мгновенно: bun install быстрее npm в 30x

— Совместимость с Node API 95%+

— Встроенный bun test и JSX/TSX без конфигурации

⚡ В 2–3 раза быстрее Node.js по большинству метрик. Подходит для CI, SSR, микросервисов и фронта.

Установить можно через терминал:

curl -fsSL https://bun.sh/install | bash

🔗 Читать подробнее в официальном блоге

🐸 Библиотека фронтендера

#свежак

📌 Команда дня: animation-composition

Когда вы вешаете сразу несколько анимаций на один элемент, они обычно дерутся.

Свойство animation-composition решает это:

.element {
  animation: fade 2s, slide 2s;
  animation-composition: add;
}

💡 Теперь fade и slide накладываются друг на друга, а не заменяют.

📍 Для чего это:

Чтобы не объединять всё в один @keyframes, не городить JS, и не терять голову от конфликтов.

Работает в Chrome, Firefox, и постепенно внедряется в остальное.

🐸 Библиотека фронтендера

#буст

Где-то в мире заплакал один сеньор… 🥲

🐸 Библиотека фронтендера

#развлекалово

😬 Чек-лист безопасного рефакторинга

1️⃣ Оцените целесообразность:

• Чётко определите цель: зачем вы делаете рефакторинг?

• Оцените риски и возможные последствия

• Убедитесь, что изменения оправданы с точки зрения бизнеса

2️⃣ Изолируйте изменения:

• Не смешивайте рефакторинг с новой функциональностью

• Делайте маленькие и атомарные изменения

• Проводите отдельные код-ревью для каждого типа правок

3️⃣ Обеспечьте защиту тестами:

• Покройте ключевые сценарии интеграционными тестами

• Тесты должны проверять поведение, а не реализацию

• Убедитесь, что тесты проходят до и после изменений

4️⃣ Проверьте результат вручную:

• Обязательно визуально проверьте, что всё работает корректно

• Убедитесь, что поведение приложения не изменилось

5️⃣ Не надейтесь только на QA:

• Ручное тестирование не заменяет разработческую ответственность

• Проверяйте критичные участки лично

6️⃣ Избегайте масштабных коммитов:

• Разбивайте изменения на логически завершённые части

• Изменения должны быть понятны и легко отслеживаемы

7️⃣ Планируйте заранее:

• Трезво оцените объём и влияние работ

• Определите, какие участки кода требуют внимания в первую очередь

🔗 Источник

🐸 Библиотека фронтендера

#буст

💡 Tier List технологий фронтенда — что выбрать сегодня и не пожалеть завтра

Кажется, все уже что-то выбирают: одни бегут за хайпом, другие держатся за проверенное. Но где середина? Это видео — попытка расставить всё по местам.

Что в видео:

📍 React, Vue, Svelte, Qwik, Solid.js, Astro, Next.js, Remix, Vite, Webpack и другие

📍 Дается оценка по критериям: актуальность, перспективы, применимость в проде

📍 Обсуждаются реальные тренды 2025 года и что из них стоит внимания

📍 В итоге формируется Tier List — от «обязательных» до «можно забыть»

🔗 Смотреть на YouTube

🐸 Библиотека фронтендера

#буст

🧤 Грин-флаги в вакансиях: что отличает хорошего работодателя

Фронтендерам знакома боль: вакансии с мутными обязанностями, отсутствующим стеком и «гибким графиком», который на деле оборачивается круглосуточной доступностью.

В статье:

📍 Как распознать нормальную вакансию по формулировкам

📍 Что говорит о зрелости компании: от стажировки до собеседования

📍 Какие детали в описании стека и обязанностей — тревожный звоночек

📍 Почему четкость условий — не роскошь, а базовый грин-флаг

🔗 Читать на Proglib

🐸 Библиотека фронтендера

🐸 Библиотека фронтендера

#развлекалово

💡 Что нового в веб-разработке: полезные техники и фичи HTML и CSS

📍 7 продвинутых HTML-трюков для улучшения веб-разработки

Наглядные примеры полезных элементов (<figure>, <details>, <dialog> и др.), повышающих семантику и интерактивность.

📍 Коллекция HTML/CSS лайфхаков

Советы по типографике, кликабельности, виртуальным клавиатурам и адаптивности интерфейсов.

📍 HTML и CSS ошибки, влияющие на доступность

Краткий гид по исправлению типовых недочётов, влияющих на восприятие контента пользователями с особыми потребностями.

📍 Магия CSS на практике: советы по вёрстке от гика

Полезные трюки: inset, стилизация без +, улучшение медиа-запросов и кнопок.

📍 CSS в 2025: какие фишки теперь доступны

Актуальные нововведения: вложенность, :user-valid, balance, расширенные возможности форматирования.

🐸 Библиотека фронтендера

#свежак

👚 Топ-вакансий для фронтендеров за неделю

Разработчик Javascript — от 150 000 ₽, удаленно (Москва)

Frontend developer (React) — от 180 000 до 250 000 ₽, удаленно (Москва)

Frontend-разработчик — офис (Санкт-Петербург)

Senior Frontend Developer — 4 200 —‍ 6 000 $, удаленно/помощь с релокацией (Грузия)

Frontend-developer — 120 000 - 200 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак